<template>
	<view>
		<uni-popup ref="popup" :animation="false">
			<view class="popupBox" >
	<!-- 				<view class="pTitle">
					<image  src="/static/blindbox/erWm.png" mode=""></image>
				</view> -->
				<image style="width: 480rpx;" :src="imgurl" mode="widthFix" ></image>
				<view class="pListBox">
					<view class="pListBox_top">
						<view class="title">
							分享至
						</view>
						<view class="pListBox_list">
							<view class="p_list_li" @click="shareShow=true">
								<image class="p_list_li_img" src="/static/blindbox/daily-tasks02.png" mode="widthFix">
								</image>
								<text>微信好友</text>
							</view>
							<view class="p_list_li" @click="posterServe">
								<image class="p_list_li_img" src="/static/blindbox/daily-tasks03.png" mode="widthFix">
								</image>
								<text>生成海报</text>
							</view>
							<view class="p_list_li" @click="myInvitation">
								<image class="p_list_li_img" src="/static/blindbox/daily-tasks04.png" mode="widthFix">
								</image>
								<text>我的邀请</text>
							</view>
						</view>
					</view>
					<view class="know" @click="close">取消</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupPoster" type="center" >
			<image style="width: 530rpx;" :src="imgurl" mode="widthFix" ></image>
			<view style="color: #ffffff; width: 100%; text-align: center;">长按保存图片或者截屏保存图片</view>
		</uni-popup>
		<!-- 750 640 -->
		<canvas canvas-id="mycanvas" style="width:375px;height: 640px;" v-show="canvasShow"></canvas>
		<view class="forward" v-if="shareShow" @click="shareShow=false">
			<view class="li-img">
				<image src="/static/my/jt.png" mode="widthFix"></image>
			</view>
			<view class="li-word">点击右上角【···】分享</view>
		</view>
	</view>
</template>

<script>
	import jweixin from '@/components/jweixin-module/jsdk'
	import wechat from '@/components/jweixin-module/wechat'
	export default {
		name:"invitation-tasks",
		data() {
			return {
				popupBoxStatus:true,
				imgurl:'',
				canvasShow:false,
				shareShow:false
			};
		},
		created() {
			this.share()
		},
		mounted() {
			
	  //如果本地有图片了，直接取，解决一些页面切换canvas没有重画
  
		},
		methods:{
			share() {
				wechat.scanQRJssdk(wx => {
					let data = {
						title:"神椰 Magic CoCo",
						desc: "欢迎来到神椰 Magic CoCo，享受更优的数字权益", // 分享描述
						link: this.domainName + '/pages/index/index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						imgUrl: this.domainName + '/static/my/kyy.png', // 分享图标
						success: function(e) {
							// 设置成功
							console.log("设置成功", e);
						},
					}
					wx.updateAppMessageShareData(data)
					wx.updateTimelineShareData(data)
				})
			},
			open(){
				uni.showLoading({
					mask:true
				})
				this.canvasShow = true
				this.$api.getInviteQRCode().then(res=>{
					this.canvasImage(res.result.inviteQrCode,res.result.inviteUrl);
					uni.hideLoading()
				})
				setTimeout(()=>{
					uni.hideLoading()
				},5000)
				// if(this.imgurl == ''){
				// 	this.canvasShow = true
				// 	this.$api.getInviteQRCode().then(res=>{
				// 		this.canvasImage(res.result.inviteQrCode,res.result.inviteUrl);
				// 	})
				//  }else{
				// 	 this.canvasShow = false
				// 	 this.$refs.popup.open()
				//  }

			},
			close() {
				this.$refs.popup.close()
			},
			// 生成海报
			posterServe() {				
				this.close()
				this.popupBoxStatus = false
				this.$refs.popupPoster.open()
				
			},
			// 我的邀请
			myInvitation(){
				uni.navigateTo({
					url:'/pages/blindbox/daily-tasks/my-invitation/my-invitation'
				})
			},
			canvasImage(ewmImg,inviteUrl){
				uni.showLoading({
					mask:true
				})
				let myCanvas = uni.createCanvasContext('mycanvas', this); 
				//画布尺寸
				// 坐标(0,0) 表示从此处开始绘制，相当于偏移。
				//背景
				// myCanvas.drawImage(require('@/static/blindbox/004.png'),0,0,375,640);
				inviteUrl = 'data:image/png;base64,' + inviteUrl
				myCanvas.drawImage(inviteUrl,0,0,375,640);
			
				//绘制并填充一个圆角矩形  
				this.fillRoundRect(myCanvas, 98, 420, 180, 180, 8, 'rgba(255,255,255,1)');
				
				myCanvas.drawImage(ewmImg,100,422,175,175);
				 
				//myCanvas.fillText('扫码进入小程序',69,432);
				//myCanvas.fillText('添加我的名片',103,458);  
				
				//开始绘画，必须调用这一步，才会把之前的一些操作实施
				myCanvas.draw(true,()=>{
					uni.canvasToTempFilePath({
						canvasId: 'mycanvas',
						success: (res) => {
							this.canvasShow = false
							this.imgurl = res.tempFilePath;
							uni.hideLoading();
							// uni.setStorageSync('person-card',this.imgurl);
							this.$refs.popup.open()
						  },
						fail: () => {
							uni.showToast({
								title: '名片加载失败',
								duration: 2000 
							});
						}
					});
				});
				
			},
			
			/** 将网络图片变成临时图片 */
			handleNetworkImgaeTransferTempImage(url) {
				return new Promise(resolve => {
					if(url.indexOf('http') === 0) {
						uni.downloadFile({
							url,
							success: res => {
								resolve(res.tempFilePath);
							}
						});
					}
					else {
						resolve(url);
					}
				});
			},
			
			saveImage(){
				var _this = this
				uni.showActionSheet({
					itemList: ['保存图片'], 
					success: (res) => {
						if(res.tapIndex == 0){
							// uni.saveImageToPhotosAlbum({
							// 	filePath: this.imgurl,//    图片文件路径，可以是临时文件路径也可以是永久文件路径，不支持网络图片路径
							// 	success: () => {
							// 		uni.showToast({
							// 			title: '保存成功',
							// 			duration: 2000
							// 		});
							// 	},
							// 	fail: () => {
							// 		uni.showToast({
							// 			title: '保存失败',
							// 			duration: 2000 
							// 		});
							// 	}
							// });
							
							
							uni.downloadFile({
								url: _this.imgurl,
								success: (res) => {
									uni.showToast({
										title: '保存成功',
										duration: 2000
									});
									console.log(res);
									//创建一个a标签
									var link = document.createElement('a');
									//把a标签的href属性赋值到生成好了的url
									link.href = res.tempFilePath;
					 
									//通过a标签的download属性修改下载图片的名字
									link.download = '海报.png';
									//让a标签的click函数，直接下载图片
									link.click();
								}
							})
			
						}
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				});
			},
			/**该方法用来绘制一个有填充色的圆角矩形 
			     *@param cxt:canvas的上下文环境 
			     *@param x:左上角x轴坐标 
			     *@param y:左上角y轴坐标 
			     *@param width:矩形的宽度 
			     *@param height:矩形的高度 
			     *@param radius:圆的半径 
			     *@param fillColor:填充颜色 
			     **/
			    fillRoundRect(cxt, x, y, width, height, radius,  fillColor) {
			        //圆的直径必然要小于矩形的宽高          
			        if (2 * radius > width || 2 * radius > height) { return false; }
			
			        cxt.save();
			        cxt.translate(x, y);
			        //绘制圆角矩形的各个边  
			        this.drawRoundRectPath(cxt, width, height, radius);
			        cxt.fillStyle = fillColor || "#000"; //若是给定了值就用给定的值否则给予默认值  
			        cxt.fill();
			        cxt.restore();
			    },
			
			
			    /**该方法用来绘制圆角矩形 
			     *@param cxt:canvas的上下文环境 
			     *@param x:左上角x轴坐标 
			     *@param y:左上角y轴坐标 
			     *@param width:矩形的宽度 
			     *@param height:矩形的高度 
			     *@param radius:圆的半径 
			     *@param lineWidth:线条粗细 
			     *@param strokeColor:线条颜色 
			     **/
			    strokeRoundRect(cxt, x, y, width, height, radius, /*optional*/ lineWidth, /*optional*/ strokeColor) {
			        //圆的直径必然要小于矩形的宽高          
			        if (2 * radius > width || 2 * radius > height) { return false; }
			
			        cxt.save();
			        cxt.translate(x, y);
			        //绘制圆角矩形的各个边  
			        this.drawRoundRectPath(cxt, width, height, radius);
			        cxt.lineWidth = lineWidth || 2; //若是给定了值就用给定的值否则给予默认值2  
			        cxt.strokeStyle = strokeColor || "#000";
			        cxt.stroke();
			        cxt.restore();
			    },
			
			    drawRoundRectPath(cxt, width, height, radius) {
			        cxt.beginPath(0);
			        //从右下角顺时针绘制，弧度从0到1/2PI  
			        cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
			
			        //矩形下边线  
			        cxt.lineTo(radius, height);
			
			        //左下角圆弧，弧度从1/2PI到PI  
			        cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
			
			        //矩形左边线  
			        cxt.lineTo(0, radius);
			
			        //左上角圆弧，弧度从PI到3/2PI  
			        cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);
			
			        //上边线  
			        cxt.lineTo(width - radius, 0);
			
			        //右上角圆弧  
			        cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);
			
			        //右边线  
			        cxt.lineTo(width, height - radius);
			        cxt.closePath();
			    }
				
		}
	}
</script>

<style scoped>
	/* 弹窗 */
	.popupBox {
		padding-top: 72rpx;
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
	}

	.popupBox .pTitle {
		width: 530rpx;
		height: 912rpx;
		background: url('/static/blindbox/daily-tasks01.png') no-repeat;
		background-size: 100% 100%;
		margin: 0 auto;
		position: relative;
	}
	.popupBox .erWm{
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 146rpx;
		width: 186rpx;
		height: 186rpx;
		padding: 6rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
	}
	.pListBox {
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		background: #ffffff;
	}

	.pListBox_top{
		width: 100%;
		padding: 30rpx 60rpx;
		box-sizing: border-box;
	}
	.pListBox_top .title{
		font-size: 32rpx;
		color: #222222;
		width: 100%;
		text-align: center;
		margin-bottom: 30rpx;
	}
	.pListBox_list{
		display: flex;
		flex-direction: row;
		justify-content: space-between;

	}
	.p_list_li {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 28rpx;
		color: #000000;
	}

	.p_list_li image {
		width: 92rpx;
		height: 92rpx;
	}
	.know{
		border-top: 2rpx solid #DFDFDF;
		padding-top: 22rpx;
		padding-bottom: 68rpx;
		font-size: 30rpx;
		width: 100%;
		text-align: center;
		color: #FF2121;
	}

	.forward {
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		top: 0;
		z-index: 999;
	}
	.forward .li-img image{
		position: absolute;
		top: -56rpx;
		right: 0;
		width: 266rpx;
	}
	.li-word{
		font-size: 46rpx;
		color: #FFFFFF;
		position: absolute;
		top: 216rpx;
		right: 84rpx;
	}
</style>